<template>
  <!-- 数据权限 -->
  <div v-loading="loading">
    <div class="scopeAuto">
      <el-tree
        :data="folderList"
        :props="defaultProps"
        node-key="id"
        :indent="30"
        :default-expand-all="false"
        :expand-on-click-node="false"
      >
        <span slot-scope="{ node, data }" class="folder-role-tree-node">
          <span class="folder-name">{{ data.label }}</span>
          <el-dropdown trigger="click" style="margin: 0 10px 0 10px;" @command="handleCommand($event, data)">
            <i class="el-icon-setting" />
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="select">{{ $t('全选') }}</el-dropdown-item>
              <el-dropdown-item command="copy">{{ $t('复制') }}</el-dropdown-item>
              <el-dropdown-item command="paste">{{ $t('粘贴') }}</el-dropdown-item>
              <el-dropdown-item command="clear">{{ $t('清空') }}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <div class="checkdiv">
            <el-checkbox v-for="dict in dataScopeOptions" :key="dict.permission + data.id" v-model="data.fileLibraryRole[dict.permission]" :label="dict.permission" true-label="Y" false-label="N" @change="radioHandle($event, dict.permission, data)">
              {{ $t(dict.dictLabel) }}
            </el-checkbox>
          </div>
        </span>
      </el-tree>
    </div>
    <div style="position: absolute;bottom: 5px;left: 0;">
      <span v-if="!isEmpty(copyOptionText)" style="font-size: 13px;font-weight: bold;">
        {{ copyOptionText }} <i class="el-icon-circle-close" style="cursor: pointer;" @click="copyOption = undefined; copyOptionText = undefined" />
      </span>
    </div>
    <div class="dialog-footer" style="text-align: right;">
      <!--<el-button @click="openViewDialog">{{ $t('查看详情') }}</el-button>-->
      <el-button @click="cancel">{{ $t("取消") }}</el-button>
      <el-button type="primary" @click="submitForm">{{ $t("保存") }}</el-button>
    </div>
  </div>
</template>

<script>

import permissionList from '@/views/folder/folderRolePermission'
import { leftListSysMenuConfigList, saveSysMenuConfig } from '@/api/file/filefolder/folder'
export default {
  props: {
  },
  data() {
    return {
      loading: false,
      // 树数据
      folderList: [],
      // 角色对象
      parentRoleData: {},
      // 树型结构的参数
      defaultProps: { children: 'children', label: 'menuName' },
      // 默认的权限数组
      dataScopeOptions: permissionList,
      // 复制的数据
      copyOption: undefined,
      // 复制粘贴等操作
      copyOptionText: undefined
    }
  },
  watch: {
  },
  created() {
  },
  methods: {
    init(data) {
      console.log(data)
      this.loading = true
      this.parentRoleData = data
      // 获取树
      leftListSysMenuConfigList({ sysRoleId: data.id, sysRoleType: 'role' }).then(response => {
        console.log(response)
        if (response.data) {
          this.folderList = []
          response.data.forEach(item => {
            // 剔除个人网盘
            if (item.id !== 'personal_files') {
              this.folderList.push(item)
            }
          })
        }
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 角色名称快速操作权限
     */
    handleCommand(e, data) {
      console.log(e, data)
      if (e === 'copy') {
        this.copyOption = data.fileLibraryRole
        this.copyOptionText = '已复制: ' + data.label
      }
      if (e === 'paste' && this.copyOption !== undefined) {
        this.dataScopeOptions.forEach(item => {
          data.fileLibraryRole[item.permission] = this.copyOption[item.permission]
        })
      }
      if (e === 'clear') {
        this.dataScopeOptions.forEach(item => {
          data.fileLibraryRole[item.permission] = 'N'
        })
      }
      if (e === 'select') {
        this.dataScopeOptions.forEach(item => {
          data.fileLibraryRole[item.permission] = 'Y'
        })
      }
    },
    /**
     * 选中权限 可取消选中
     */
    radioHandle(value, e, data) {
      data.fileLibraryRole[e] = value
      console.log(this.folderList)
    },
    /**
     * 关闭
     */
    cancel() {
      if (this.$parent.openFolder !== undefined) {
        this.$parent.openFolder = false
      }
      if (this.$parent.$parent.openFolder !== undefined) {
        this.$parent.$parent.openFolder = false
      }
    },
    /**
     * 保存
     */
    submitForm() {
      this.loading = true
      saveSysMenuConfig(this.folderList).then(() => {
        this.cancel()
      }).catch(() => {
        this.loading = false
      })
    },
    /**
     * 打开视图
     */
    openViewDialog() {
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/.scopeAuto {
  position: relative !important;
  width: 100% !important;
  overflow: auto !important;
  height: calc(100% - 50px) !important;
  .el-tree{
    display: inline-block;
  }
  .el-tree-node__content{
    height: 30px;
  }
}
/deep/ .el-checkbox {
  margin-right: 15px !important;
}
.checkdiv {
  display: inline-block;
}
.folder-name {
  font-size: 14px;
  font-weight: bold
}
</style>
